<template>
	<view>
		<u-navbar leftIconColor="#000000" :titleStyle="{ color: '#000000' }" :bgColor="bgColor" title="下级单价"
			:placeholder="true" :autoBack="true"></u-navbar>
		<view class="note">

		</view>
		<view class="" style="width: 92%;margin: 0 auto;position: relative;z-index: 1;padding-top: 15px;">
			<view style="padding:20px; background-color: #fff; border-radius: 15px">
				<!-- <view class="flex" style="padding-bottom: 15px; border-bottom: 1px solid #f3f3f3">
					<view style="font-size: 14px; font-weight: 400; color: #818181">你正在查看</view>
					<view style="font-size: 14px; font-weight: 400; color: #000">{{ allin.projectName }}</view>
					<view style="font-size: 14px; font-weight: 400; color: #818181">项目的代理价格</view>
				</view> -->
				<view class="flex" style="justify-content: space-between;">
					<view style="font-size: 14px">只看已设置价格的代理</view>
					<view style="margin-left: 19px">
						<u-switch @change="switchs" v-model="value" activeColor="#2447FF" size="20"></u-switch>
					</view>
				</view>
			</view>
			<view class="flex" style="margin-top: 15px;justify-content: space-between;">
				<view class="" style="font-size: 15px;font-weight: 400;color: #333333;">
					代理列表
				</view>
				<view class="" style="width: 70%;">
					<u-search @search="list" @custom="list" v-model="search" bgColor="#fff" :showAction="true"
						actionText="搜索" :animation="true"></u-search>
				</view>
			</view>
			<view v-for="(it, i) in arr" :key="i" style="background-color: #fff; border-radius: 15px; margin-top: 15px">
				<view style="">

					<!-- <view class="flex" style="padding: 10px 15px; background-color: #ff3331; border-radius: 10px 10px 0 0">
						<view style="width: 25%" class="tit">代理</view>
						<view style="width: 20%" class="tit">结算标准</view>
						<view style="width: 30%" class="tit">代理单价/比例</view>
						<view style="width: 25%" class="tit">操作</view>
					</view> -->
					<view style="padding: 0px 15px">
						<view v-for="(item, index) in it.agentprice" :key="index" class="flex"
							style="flex-direction: column;align-items: flex-start;padding-bottom: 15px;">
							<view style="width: 100%" class="tits">代理：{{ it.username }}</view>
							<view class="flex" style="width: 100%;">
								<view style="width: 50%" class="tits">结算标准：
									<text
										style="font-size: 14px;color: #2447FF;font-weight: 600;">{{ item.name }}</text>
								</view>
								<view style="width: 50%" class="tits" v-if="item.stype != 0">
									代理单价/比例：
									<text
										style="font-size: 14px;color: #2447FF;font-weight: 600;">{{ item.sagent_price }}/{{ item.sscale }}%</text>
								</view>
								<view style="width: 50%" class="tits" v-else>代理单价/比例：无</view>
							</view>
							<view style="width: 100%;">
								<view @click="pricee(it.id, item)" class=" flex" style="justify-content: space-between;
								background-color: #D8D8D8;padding: 8px 12px;border-radius: 8px;">
									<text style="font-size: 11px;font-weight: 400;color: #FF6C23;">操作：请您设置该代理议价</text>
									<u-icon name="arrow-right" color="#FF6C23" size="14"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup round="10" :show="shows" mode="center" @close="shows = false">
			<view style="padding: 15px; min-width: 300px; max-width: 300px">
				<view style="font-size: 16px; color: #1d1f20">代理价设置</view>
				<view style="margin-top: 15px; font-size: 14px">
					我的价格
					<text style="color: #ff3331">{{ info.myprice }}</text>
					元，我的抽成
					<text style="color: #ff3331">{{ (info.myprice - info.agent_price).toFixed(1) }}</text>
					元
				</view>
				<view style="border-radius: 10px; margin-top: 10px; box-sizing: border-box">
					<!-- <view class="flex"
						style="border-radius: 10px 10px 0 0; background-color: #ff3331; padding: 10px 10px">
						<view class="proportion">结算标准</view>
						<view class="proportion">代理价</view>
						<view class="proportion">抽成比例</view>
					</view> -->
					<view
						style="padding: 0px 10px; border-radius:10px;background-color: #F9F9F9;">
						<view class="flex"
							style="border-radius: 10px 10px 0 0; padding: 10px 0; flex-direction: column;align-items: flex-start;">
							<view style=" font-size: 14px; text-align: center;justify-content: space-between;"
								class="flex">
								<view class="proportion">结算标准</view>
								<view class="" style="color: #333333;padding-left: 35px;">
									{{ info.settlement_name }}
								</view>
							</view>
							<!-- <view style="width: 33.33%; font-size: 14px; text-align: center" class="">
								{{ info.settlement_name }}
							</view> -->
							<view style="padding: 25px 0;" class="flex">
								<view class="proportion">代理价</view>
								<view class="flex" style="width: 50%;background-color: #FFFFFF;margin-left: 50px;">
									<u--input style="text-align: right;" @blur="blur_one" :disabled="sex != 1"
										placeholder="请输入" v-model="info.agent_price" border="none"></u--input>
									<!-- <view style="font-size: 14px; color: #1d1f20">元</view> -->
								</view>
							</view>
							<!-- <view style="width: 33.33%" class="flex">
								<u--input @blur="blur_one" :disabled="sex != 1" placeholder="请输入"
									v-model="info.agent_price" border="none"></u--input>
								<view style="font-size: 14px; color: #1d1f20">元</view>
							</view> -->
							<view style="" class="flex">
								<view class="proportion">抽成比例</view>
								<view class="flex" style="width: 50%;background-color: #FFFFFF;margin-left: 35px;">
									<u--input style="text-align: right;" @blur="blur_two" :disabled="sex != 2"
										placeholder="请输入" v-model="info.scale" border="none"></u--input>
									<!-- <view style="font-size: 14px; color: #1d1f20">%</view> -->
								</view>
							</view>
							<!-- <view style="width: 33.33%" class="flex">
								<u--input @blur="blur_two" :disabled="sex != 2" v-model="info.scale" placeholder="请输入"
									border="none"></u--input>
								<view style="font-size: 14px; color: #1d1f20">%</view>
							</view> -->
						</view>
						<view class="flex" style="border-radius: 10px 10px 0 0; padding: 10px 0;width: 100%;">
							<view style=" font-size: 14px; text-align: center" class="">设价方式</view>
							<view style="width: 60%;padding-left: 35px;">
								<uni-data-checkbox  v-model="sex" :localdata="sexs" />
							</view>
						</view>
						<!-- <view class="flex" style="border-radius: 10px 10px 0 0; padding: 10px 0">
							<view style="width: 33.33%; font-size: 14px; text-align: center" class="">设价方式</view>
							<view style="width: 66.66%">
								<uni-data-checkbox v-model="sex" :localdata="sexs" />
							</view>
						</view> -->
					</view>
				</view>
				<view class="flex" style="padding: 30px 35px 0px;flex-direction: column;">
					<view @click="btns" style="
							padding: 10px;
							text-align: center;
							background-color: #2447FF;
							color: #ffffff;
							border-radius: 20px;
							font-size: 14px;
							width: 50%;
						">
						确定
					</view>
					<view @click="shows = false" style="
							padding: 10px;
							text-align: center;
							color: #1d1f20;
							margin-right: 10px;
							font-size: 14px;
							width: 50%;
						">
						取消
					</view>
				
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: false,
				shows: false,
				sexs: [{
						text: '代理价',
						value: 1,
					},
					{
						text: '抽成比例',
						value: 2,
					},
				],
				sex: 1,
				arr: [],
				is_set: '',
				search: '',
				info: '',
				project_id: '',
				settlement_id: '',
				subuser_id: '',
				allin: '',
				bgColor: 'rgba(255,255,255,0)',
			};
		},
		onLoad(e) {
			this.project_id = e.id;
			this.list();
		},
		onPageScroll(e) {
			if (e.scrollTop > 50) {
				this.bgColor = 'rgba(255,255,255,1)'
			} else {
				this.bgColor = 'rgba(255,255,255,0)'
			}
		},
		methods: {
			async btns() {
				if (this.sex == 1) {
					let res = await this.$http.car.setSettlementPrice({
						project_id: this.project_id,
						price: this.info.agent_price,
						settlement_id: this.settlement_id,
						type: 2,
						subuser_id: this.subuser_id,
					});
					console.log(res);
					if (res.code == 1) {
						this.shows = false;

						this.$tips(res.msg);
					} else {
						this.shows = false;
						uni.hideLoading();
						this.$tips(res.msg);
					}
				} else {
					let res = await this.$http.car.setSettlementPrice({
						project_id: this.project_id,
						price: this.info.scale,
						settlement_id: this.settlement_id,
						type: 1,
						subuser_id: this.subuser_id,
					});
					console.log(res);
					if (res.code == 1) {
						this.shows = false;
						setTimeout(() => {
							this.$tips(res.msg);
						}, 100);
					} else {
						this.shows = false;
						uni.hideLoading();
						this.$tips(res.msg);
					}
				}
				setTimeout(() => {
					this.list();
				}, 1000);
			},
			blur_one() {
				this.info.scale = Number(((this.info.myprice - this.info.agent_price) / this.info.myprice) * 100);
				this.info.scale = Math.floor(this.info.scale * 10) / 10;
			},
			blur_two() {
				this.info.agent_price = Number(this.info.myprice - (this.info.myprice * this.info.scale) / 100).toFixed(1);
				// console.log(this.pricing_pop.scale);
			},
			async pricee(id, item) {
				let res = await this.$http.car.showSettlementPrice({
					subuser_id: item.id,
				});
				if (res.code == 1) {
					this.shows = true;
					this.subuser_id = item.papid;
					this.settlement_id = item.settlement_id;
					this.info = res.data;
				}
			},
			switchs(e) {
				if (e) {
					this.is_set = 1;
				} else {
					this.is_set = 0;
				}
				this.list();
			},
			async list() {
				let res = await this.$http.car.setSubPrice({
					project_id: this.project_id,
					search: this.search,
					is_set: this.is_set,
				});
				this.arr = res.data.directTeamList;
				this.allin = res.data;
			},
		},
	};
</script>

<style scoped lang="scss">
	/deep/ .checklist-group {
		flex-wrap: nowrap !important;
	}

	/deep/ .uni-data-checklist .checklist-group .checklist-box {
		margin-right: 0px !important;
		width: 100%;
	}

	/deep/ .uni-data-checklist .checklist-group .checklist-box.is--default.is-checked .radio__inner .radio__inner-icon {
		background-color: #2447FF !important;
	}

	/deep/ .uni-data-checklist .checklist-group .checklist-box.is--default.is-checked .radio__inner {
		border-color: #2447FF !important;
	}

	/deep/ .uni-data-checklist .checklist-group .checklist-box.is--default.is-checked .checklist-text {
		color: #1d1f20;
	}

	.proportion {
		font-size: 14px;
		font-weight: 400;
		color: #000;
		// width: 33.33%;
		text-align: center;
	}

	/deep/ .u-input {
		background-color: #fff !important;
		padding: 5px 15px !important;
		border-radius: 10px;
	}

	.price {
		width: 48px;
		border-radius: 5px;
		background: #ff3331;
		color: #ffffff;
		font-size: 14px;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		line-height: 22px;
		text-align: center;
		margin: 0 auto;
	}

	.tits {
		font-size: 14px;
		font-weight: 400;
		color: #1d1f20;
		// text-align: center;
		padding: 15px 0;

		&:last-child {
			border-bottom: none !important;
		}
	}

	.tit {
		font-size: 14px;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #fff;
		text-align: center;
	}

	.note {
		background-image: url('@/static/font/21.png');
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		background-size: 100% 100%;
	}
	/deep/.checklist-group {
		flex-direction: column !important;
	}
</style>
<style>
	page {
		background-color: #f7f9fa;
	}
</style>